<template>
 <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1'>
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" value="1"
   @change="countChaged" ref="numbox"/>
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</template>

<script>
import mui from '../../lib/MUI/js/mui.min.js';
 export default {
   data () {
     return {

     }
   },
   mounted() {
      //  mui(".mui-numbox").numbox().getValue()
   },
   methods:{
     countChaged(){
      //  console.log(this.$refs.numbox.value);
        this.$emit("getCount", parseInt(this.$refs.numbox.value));

     }
     
   },
  //  props: ["max"], 
  //  watch:{
  //    max: function (newVal, oldVal) {
  //        mui(".mui-numbox").numbox().setOption('max',newVal)
  //       }
  //  }
    props: ["max"], 
    
    watch: {
      
    // 属性监听
   'max': function(newVal, oldVal) {
      // 使用 JS API 设置 numbox 的最大值
     mui(".mui-numbox").numbox().setOption('max', newVal);
    }
  }
 }
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
